<template>
    <div>
        <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">全部订单</el-menu-item>
            <el-menu-item index="2">待付款</el-menu-item>
            <el-menu-item index="3">待发货</el-menu-item>
            <el-menu-item index="4">待收货</el-menu-item>
            <el-menu-item index="5">待评价</el-menu-item>
            <el-menu-item index="6">已完成</el-menu-item>
            <el-menu-item index="7">已取消</el-menu-item> -->

          <!-- </el-menu> --> 
          <div class="line"></div>
          <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#fff"
            text-color="#000"
            active-text-color="#27ba9b">
            <el-menu-item index="1">全部订单</el-menu-item>
            <el-menu-item index="2">待付款</el-menu-item>
            <el-menu-item index="3">待发货</el-menu-item>
            <el-menu-item index="4">待收货</el-menu-item>
            <el-menu-item index="5">待评价</el-menu-item>
            <el-menu-item index="6">已完成</el-menu-item>
            <el-menu-item index="7">已取消</el-menu-item>
              
          </el-menu>
          
        
    </div>
</template>

<script>
        import { inject } from 'vue'
export default {
  name: 'XtxTabsPanel',
  props: {
    // 标签页标题文章
    label: {
      type: String,
      default: ''
    },
    // 唯一标识
    name: {
      type: String,
      default: ''
    }
  },
  setup () {
    // 当前组件该不该显示，取决于xtx-tabs组件的activeName数据是否和props.name一样
    const activeName = inject('activeName')
    return { activeName }
  }
}
</script>

<style lang="scss" scoped>
div,p,ul,ol,li,dl,dt,dd,form,table,h1,h2,h3,h4,h5,h6,input,select,textarea,span,strong,em,b,i,u,a,img,*{padding:0;margin:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
body { font-family: '黑体'; font-size: 12px;  color: #000; background-color: #fff; }
ul,ol,li { list-style: none; }
h1,h2,h3,h4,h5,h6{ font-size: 14px;}
a img{ border: none;}
img,input,textarea,select,option,output,span,a,b,em,i,strong,u,s,button,label{ vertical-align:middle;}
table{border-collapse:collapse;}
a { background: transparent; text-decoration: none; color: #333; }
a:hover{  color: #f90; }
.clear{ clear:both; height: 0; width: 0; overflow: hidden;}
body,html{height: 100%;width: 100%;}
.product{

    width: 110px;
    border-right: 1px solid #f5f5f5;
    text-align: center;
    font-size: 16px;
}
.product.active{
    border-top: 2px solid #27ba9b;
    height: 60px;
    background: #fff;
    line-height: 56px;

}
</style>